<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>File Upload</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" id="theme">
<link rel="stylesheet" href="/opt/blueimp/jquery.fileupload-ui-custom.css">
<link rel="stylesheet" href="/style/common.css">
<style type="text/css">
body {
  font-size: 12px;
  margin: 0;
  padding: 20px;
  background-color: gray;
}

.file-uris {
	display: none;
	visibility: hidden;
}
</style>

</head>
<body>

<div title="You may select or drag and drop multiple files here">
<form class="upload" action="/bin/file/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" multiple>
    <button>Upload</button>
    <div >Click to select or drag and drop</div>
</form> 
</div>

<table id="upload_panel" ></table>

<ul class="gallery" id="download_panel" oncontextmenu="return false;" >
</ul>

<div id="add-panel" style="display: none; clear: both;" >
<a class="action" href="/jsonp/info.niwota.frames/Frame/add" onclick="return doAdd(this);" ><img class="icon48" src="/drawable/ic_menu_add">Add picture</a>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<script src="/opt/blueimp/jquery.fileupload.js"></script>
<script src="/opt/blueimp/jquery.fileupload-ui.js"></script>
<script src="/opt/json/jquery.json-2.2.js"></script>

<script type="text/javascript">

/*global $ */
$(function () {
    $('.upload').fileUploadUI({
        uploadTable: $('#upload_panel'),
        downloadTable: $('#download_panel'),
        buildUploadRow: function (files, index) {
            var file = files[index];
            return $(
                '<tr style="display:none">' +
                '<td>' + file.name + '<\/td>' +
                '<td class="file_upload_progress"><div><\/div><\/td>' +
                '<td class="file_upload_cancel">' +
                '<div class="ui-state-default ui-corner-all ui-state-hover" title="Cancel">' +
                '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                '<\/div>' +
                '<\/td>' +
                '<\/tr>'
            );
        },
        buildDownloadRow: function (file) {
  
        	showOrHideAdd();
        	//
            return $(makeCell(file));
        }
    });
});
</script> 
<script type="text/javascript">

function makeCell(file) {
	var desc = file.name + '<br /><br />' + file.size + '<br />' + file.type;
	var alt = 'name: ' + file.name + ' size: ' + file.size + ' type: ' + file.type;
	var doclink = '/tmp/' + file.path;
	var actlink = '/bin/file/remove?uri=' + encodeURIComponent(file.uri);
	var isImage = (file.type && file.type.indexOf('image/') != -1);
	if (isImage) {
		return	'<li style="display:none; margin: 8px;" title="' + alt + '" >'
		+ '<a target="_blank" href="' + doclink + '"><em>' + desc + '</em>'
		+ '<img src="' + doclink + '" alt="' + alt + '" /></a>'
		+ '<a onclick="return doRemove(this);" class="action" href="' + actlink + '"><span class="action_ic_delete" title="Remove"></span></a>'
		+ '<span class="file-uris" >' + encodeURIComponent(file.uri) + '</span></li>';
	} else {
		return '<li style="display:none; margin: 8px;" title="' + alt + '" >'
		+ '<a target="_blank" href="' + doclink + '"><b>' + desc + '</b>'
		+ '</a>'
		+ '<a onclick="return doRemove(this);" class="action" href="' + actlink + '"><span class="action_ic_delete" title="Remove"></span></a>'
		+ '<span class="file-uris" >' + encodeURIComponent(file.uri) + '</span></li>';
	}
}

function showOrHideAdd() {
	var hasFile = ($('.file-uris').length > 0);
	//
	if (hasFile) {
		$('#add-panel').show();
	} else {
		$('#add-panel').hide();
	}
}


function doRemove(a) {
	$.get(a.href, function(data) {
		var li = a.parentNode;
		li.parentNode.removeChild(li);
		//
		showOrHideAdd();
	});
	return false;
}

function doAdd(a) {
	var uris = new Array();
	$('.file-uris').each(function(index) {
		uris[index] = $(this).text();
 	});
 	var link = a.href + '?param0=' + encodeURIComponent($.toJSON(uris));
 	$.getJSON(link, function(data) {
	  $('#download_panel').html(link + ':' + data );
	});
	
	$('#download_panel').html('');
	
	showOrHideAdd();
	return false;
}
</script>

</body> 
</html>